<template>
  <div class="login">
    <p>Welcom To Backstage Management</p>
    <img src="../assets/timg.jpg" alt="">
    <form ref="loginRef">
      <label for="username" >
        <input @blur="checkName" type="text" id="username" v-model="form.username" placeholder="用户名">
        <span id="usernameOption"></span>
      </label>
      <label for="password">
        <input @blur="checkPassword" type="password" id="password" v-model="form.password" placeholder="密码">
        <span id="passwordOption"></span>
      </label>
      <button id="denglu" @click="denglu">登陆</button>
      <button id="chongzhi" @click="chongzhi">重制</button>
    </form>
  </div>
</template>

<script>
import { log } from 'util'
import formCheck from '../common/formCheck'
import {request} from '../network/index' 
//引入myalert
import myAlert from "../common/alert"; 
export default {
  name:'Login',
  data(){
    return{
      form:{
        username:'',
        password:''
      },
      checkRules:{
        username:[
          {required:true,messeage:'请输入登陆名称'},
          {min:3,max:10,messeage:'长度在3到10之间'},
          {illegalString:false,messeage:'只允许数组,字母,下划线!'}
        ],
        password:[
          {required:true,messeage:'请输入密码'},
          {min:6,max:10,messeage:'长度在6到10之间'},
          {illegalString:false,messeage:'只允许数组,字母,下划线!'}
        ]
      }
    }
  },
  methods:{
    //验证用户名
    checkName(){
      formCheck(this.checkRules.username,this.form.username,'usernameOption')
    },
    //验证密码
    checkPassword(){
      formCheck(this.checkRules.password,this.form.password,'passwordOption')
    },
    //登陆
   async denglu(){
      //表单预验证
      let user = document.getElementById('usernameOption').innerHTML;
      let pass = document.getElementById('passwordOption').innerHTML;
      let userIput = this.$refs.loginRef[0].value
      let passIput = this.$refs.loginRef[1].value
      if((user != '' || pass != '') || (userIput == '' ||  passIput == '')){
          alert('数据不合法!')
      }else{
        //发送axios请求
         let res = await request({
         url:'/login',
         method:'post',
         data:{
           username:this.form.username,
           password:this.form.password
        }}).catch(err => {
          alert(err.response.data)
        })
        if(res.status === 200){
          console.log(res)
          //1,保存token
          window.sessionStorage.setItem('token',res.data.token)
          //2，提示登陆成功
          myAlert(res.data.info)
          //3,跳转到/home
          this.$router.push('/home')
        }
      }
    },
    //重置表单
    chongzhi(){
      let form =this.$refs.loginRef
      console.log( this.$refs.loginRef[0].type)
      for(let i = 0; i < form.length; i++){
        if(form[i].type != 'button'){
          form[i].value = ''
        }
      }
      //重制验证信息
      document.getElementById('usernameOption').innerHTML='';
      document.getElementById('passwordOption').innerHTML='';
    }
  },
  
}
</script>

<style scoped>
.login{
  width: 30%;
  max-width: 800px;
  min-width: 300px;
  margin: 50px auto;
  background-color: rgba(11, 128, 206, 0.479);
  text-align: center  ;
  border-radius: 15px;
  padding: 30px 0 50px;
  
}
.login p{
  font-size: 20px;
  color:red;
}
.login img{
  height: 100px;
  width: 100px;
  border-radius: 50%;
  transition: all ease-in-out 1s;
}
.login img:hover{
  transform:rotateZ(360deg)
}
.login label{
  position: relative;
  display: block;
  width: 100%;
  margin: 30px 0;
  padding: 0 20px;
  box-sizing: border-box;
}
.login input{
  width: 100%;
  border: none;
  height: 30px;
  /* border-radius: 15px; */
  border-bottom: 1px solid;
  outline: none;
  background-color: rgba(127, 255, 212, 0.014);
}
.login button {
  height: 30px;
  width: 150px;
  margin: 10px 10px;
  background-color: rgba(95, 158, 160, 0.288);
  border: none;
  outline: none;
  transition: all ease .3s;
  color: rgb(73, 43, 4);
}
.login button:hover{
  background-color: rgba(128, 128, 128, 0.404);
  font-weight: 500;
}
.login span{
  position: absolute;
  left: 20px;
  bottom: -20px;
  font-size: 15px;
  color: red;
}
</style>